<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./01.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <div class="header">
      <div class="headerContent">
        <div class="container">
          <!-- 购物商城logo -->
          <div class="logo">
            <a href="https://www.mi.com/" class="logocontent"></a>
          </div>
          <div class="text">
            <!-- 温馨提示 -->
            <h2>我的购物车</h2>
            <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
          </div>
          <div class="right">
            <div>
              <!--账号信息  -->
              <span>2711439556</span>
              <span>^</span>
              <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
              <!-- 我的订单 -->
              <a href="">我的订单</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-main">
      <div class="container">
        <div class="cart">
          <div class="cart-list">
            <table>
              <tr>
                <!-- 全选按钮 -->
                <td class="first">
                  <input type="checkbox" style="zoom:170%;" v-model="allChecked">
                  <span class="selectAll">全选</span>
                </td>
                <!-- 商品信息 -->
                <td class="img"></td>
                <td class="name">商品名称</td>
                <td class="price">单价</td>
                <td class="num">数量</td>
                <td class="total">小计</td>
                <td class="action">操作</td>
              </tr>
              <tr class="list" v-for="item in list">
                <td> <input type="checkbox" style="zoom:170%;" v-model="item.isChecked"></td>
                <td class="img"><img :src="item.img" alt=""></td>
                <td class="desc">{{item.desc}}</td>
                <td class="price">{{item.price}}元</td>
                <td>
                  <div class="number">
                    <!-- 加减按钮 -->
                    <div class="decrement" @click="decrement(item)">-
                    </div>
                    <input type="text" class="count" v-model="item.number">
                    <div class="increment" @click="increment(item)">+</div>
                  </div>
                </td>
                <td class="subtotal">{{subTotal(item)}}</td>
                <td class="action">×</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <!-- footer -->
      <div class="footer">
        <div class="container">
          <span class="ahead">继续购物</span>
          <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
          <!-- 已选择提示 -->
          <span>已选择<span>0</span>件</span>
          <!-- 合计 -->
          <span style="margin-left: 700px;color: #ff6700;">合计：</span>
          <h2 style="display: inline-block; color: #ff6700;">{{allprice}}</h2>
          <span style="color: #ff6700;">元</span>
        </div>
        <!-- 结算按钮 -->
        <a href="" class="settlement">去结算</a>
      </div>
    </div>

  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          // 手机信息
          list: [
            {
              isChecked: true,
              number: 0,
              img: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202303281313_028af25dd24aa67f8371d56246cc5eca.png?thumb=1&w=100&h=100&f=webp&q=90",
              desc: "Redmi Note 12 Turbo 12GB+512GB 星海蓝",
              price: 2399
            },
            // 209010331李霓
            {
              isChecked: false,
              number: 0,
              img: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212261018_0724441516a1608696413107bcf58253.png?thumb=1&w=100&h=100&f=webp&q=90",
              desc: "Xiaomi 13 Pro  12GB+256GB 陶瓷黑",
              price: 5799
            },
            {
              isChecked: false,
              number: 0,
              img: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211292343_168afc12b2517aaef89cb8c92afd457d.png?thumb=1&w=100&h=100&f=webp&q=90",
              desc: "Redmi Note 12 Pro 极速版  8GB+256GB 子夜黑",
              price: 1799
            },

          ]
        }
      },
      // 209010331李霓
      computed: {
        allChecked: {
          get () {
            return this.list.length === this.list.filter((item) => {
              return item.isChecked == true
            }).length
          },
          set (value) {
            this.list.forEach(el => {
              el.isChecked = value
            });
          }
        },
        // 209010331李霓
        allprice () {
          let sum = 0
          this.list.forEach((el) => {
            if (el.isChecked) {
              sum += el.number * el.price
            }
          })
          return sum
        },
        subTotal () {
          return (item) => { return (item.number * item.price) };
        }
      },
      // 209010331李霓
      methods: {
        decrement (item) {
          if (item.number > 0) {
            item.number--
          }
        },
        increment (item) {
          item.number++
        }
      },

    })
    app.mount("#app")    
  </script>
</body>

</html>